<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-for="http://www.w3.org/1999/xhtml">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<head>
  <meta charset="UTF-8">
  <title>记事本</title>
</head>
<body>
<div id="app" align="center">
  <h1>记事本</h1>
  <input v-show="message.length>0" type="submit" value="清空记事本" @click="clear">
  <input type="text" v-model="inputvalue" @keyup.enter="add">
  <p  v-show="message.length>0" >一共{{message.length}}条数据</p>
  <h3 v-for="a,index in message">
    {{index+1}} {{a}}   <input type="submit" value="删除" @click="remove(index)">
  </h3>
  </table>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: ["写代码", "吃饭", "睡觉"],
      inputvalue:"好好学习，天天向上。",
    },
    methods: {
      add: function () {
        this.message.push(this.inputvalue)
      },
      remove:function (index) {
        this.message.splice(index,1);
      },
      clear:function () {
        this.message=[];
      }


    }

  })
</script>
</body>
</html>
